==========================================================

DX490a - Summer 2010

Instructor: Stelios Manousakis

==========================================================

Class 13.2:

SuperCollider as a visual programming environment

Contents:

• Drawing and animation

- Pen

- SCDraw / SCDrawServer

• Working with Images

- SCImage

- SCImageFilter

• Quartz Composer in SC

- SCQuartzComposerView

==========================================================

// ================= SUPERCOLLIDER AS A VISUAL PROGRAMMING ENVIRONMENT =================

// Probably the last thing that comes to mind when thinking about SuperCollider are its graphics capabilities, but the truth is that it can be quite powerful in this aspect. SC draws in a similar manner as Processing does, but has a far superior algorithmic backbone. Of course, it is not optimized for graphics, so it can be slow, but one can integrate Quartz Composer (in Mac OS X), opening .qtz patches within SC and without having to bother with OSC communication.

// ====== DRAWING AND ANIMATION ======

// ------ Pen --

// Pen is a class that allows you to algorithmically draw inside an Window (SCPen and SCWindow for CocoaGUI).

// To draw, you need to call the drawHook function or the drawFunc function (when drawing inside an UserView/SCUserView), and then refresh the window to view the results of your actions.

// Here is an example by James McCartney:

(

// By James McCartney

var w, h = 700, v = 700, seed, run = true, phase = 0;

w = Window("wedge", Rect(40, 40, h, v), false);

w.view.background = Color.rand(0,0.3);

w.onClose = { run = false }; // stop the thread on close

w.front;

// store an initial seed value for the random generator

seed = Date.seed;

w.drawHook = {

Pen.width = 2;

Pen.use {

// reset this thread's seed for a moment

thisThread.randSeed = Date.seed;

// now a slight chance of a new seed or background color

if (0.006.coin) { seed = Date.seed; };

if (0.02.coin) { w.view.background = Color.rand(0,0.3); };

// either revert to the stored seed or set the new one

thisThread.randSeed = seed;

// the random values below will be the same each time if the seed has not changed

// only the phase value has advanced

Pen.translate(h/2, v/2);

// rotate the whole image

// negative random values rotate one direction, positive the other

Pen.rotate(phase * 1.0.rand2);

// scale the rotated y axis in a sine pattern

Pen.scale(1, 0.3 * sin(phase * 1.0.rand2 + 2pi.rand) + 0.5 );

// create a random number of annular wedges

rrand(6,24).do {

Pen.color = Color.rand(0.0,1.0).alpha_(rrand(0.1,0.7));

Pen.beginPath;

Pen.addAnnularWedge(Point(0,0), a = rrand(60,300), a + 50.rand2, 2pi.rand

+ (phase * 2.0.rand2), 2pi.rand);

if (0.5.coin) {Pen.stroke}{Pen.fill};

};

// fork a thread to update 20 times a second, and advance the phase each time

{ while { run } { w.refresh; 0.05.wait; phase = phase + 0.01pi;} }.fork(AppClock)

)

// For a couple more demos look at these files:

Document.open("examples/GUI examples/rotary hommage duchamp.scd")

Document.open("examples/GUI examples/Nick's LetterGimmick.scd")

// You should also check out Frederik Olofsson's blog, where he has a tutorial and several very nice examples of AudioVisuals with SC:

"open http://www.fredrikolofsson.com/f0blog/?q=node/316".unixCmd

and:

"open http://www.fredrikolofsson.com/f0blog/files/audiovisuals_with_sc-examples.zip".unixCmd

// You may also want to get these extensions to the Pen class:

"open http://swiki.hfbk-hamburg.de:8888/MusicTechnology/743".unixCmd

// ------ SCDraw / SCDrawServer --

// These two classes are in the SCAnimation quark by Don Craig, and are intended for realtime (SCDrawServer) and non-realtime (SCDraw) procedural animation. These classes use Pen, so they can do everything Pen can, plus some extra things. Have a look at the help-files for more information and some examples.

Quarks.install( "SCAnimation", checkoutIfNeeded: false)

// ====== WORKING WITH IMAGES ======

// ------ SCImage --

// You can load, create and save images within SC using the SCImage class.

// Load an image from your computer

i = SCImage.new("/Library/Desktop Pictures/Ripples Blue.jpg");

[i.width, i.height].postln;

i.plot;

i.free;

// Or, load an image from the web: URL string - http:// or ftp:// - blocks until image is downloaded

i = SCImage.new("http://www.washington.edu/dxarts/images/logo.gif");

i.plot;

i.url;

i.free;

// Let's do some simple operations to an image:

// add an image to a window

w = SCWindow.new.front;

w.view.background = Color(0.6,0.2,0.2);

i = SCImage.new("http://www.washington.edu/dxarts/images/logo.gif");

w.view.backgroundImage_(i, 1, 0.6); // (image, tileMode, alpha);

// grab the image:

g = SCImage.fromWindow(w, Rect(0, 0, 85, 95));

g.plot(freeOnClose:true);

w.close;

// create another window;

w = SCWindow.new.front;

w.view.background = Color(0.2,0.6,0.6);

w.view.backgroundImage_(g, 4, 0.6); // (image, tileMode, alpha)

g.free;

// grab the new image, and create another window

j = SCImage.fromWindow(w, Rect(0, 0, 190, 190));

j.plot(freeOnClose:true);

j.write("~/Desktop/my_drawing.png"); // write the image

w.close;

j.free

// Now, create a 2D slider with that image as a background

(

a = SCImage.new("~/Desktop/my_drawing.png");

w = SCWindow.new("SCImage background");

l = SC2DSlider.new(w, Rect(10,10,190,190)).backgroundImage_(a, 4, 1);

w.front;

a.free; // safe

)

l.knobColor = Color(1, 0, 0, 0.4)

// For more information, see the SCImage helpfile

// ------ SCImageFilter --

// You can apply CoreImage Filters to an SCImage, using the SCImageFilter - and there are dozens of filters available!!!!

// You can find a list and more info about these filters here:

// http://developer.apple.com/documentation/GraphicsImaging/Reference/CoreImageFilterReference/Reference/reference.html

(

// the image to use; scaled-down for faster computation

a = SCImage.new("/Library/Desktop Pictures/Plants/Peony.jpg").scalesWhenResized_(true).setSize(500, 400);

a.plot;

)

(// posterize

h = SCImageFilter.new(\CIColorPosterize);

a.addFilter(h); // first call needed